import React, { PureComponent } from 'react';
import { Modal, Button, Card } from 'antd';
import PropTypes from 'prop-types';
import DescriptionList from '@/components/DescriptionList';
import styles from '@/common/PateoTable/TableList.less';
import { getDicByKey } from '@/utils/common';

const { Description } = DescriptionList;

export default class SMSModal extends PureComponent {
  static contextTypes = {
    dicData: PropTypes.array,
  };
  state = {
  };

  componentDidMount() {
  }
  componentWillReceiveProps() {
  }
  close = () => {
    const { handleCloseMsg } = this.props;
    handleCloseMsg();
  }
  renderSimpleForm() {
    const { msgVisible, sms } = this.props;
    const footer = (
      <div>
        <Button type="primary" onClick={this.close}>返回</Button>
      </div>
    );
    return (
      <div>
        <Modal
          title="消息详情"
          footer={footer}
          visible={msgVisible}
          onCancel={this.close}
        >
          <div>
            <Card bordered={false} type="inner">
              <DescriptionList title="">
                <Description term="短信接收号"style={{ width: '100%' }}>{sms.msisdn}</Description>
                <Description term="短信发送时间"style={{ width: '100%' }}>{sms.sendTime}</Description>
                <Description term="短信序列号"style={{ width: '100%' }}>{sms.sequenceNo}</Description>
                <Description term="短信状态"style={{ width: '100%' }}>
                  {sms ? getDicByKey(this.context.dicData, 'vehicleMessageStatus', sms.messageStatus) : ''}
                </Description>
                <Description term="短信错误码"style={{ width: '100%' }}>{sms.smsErrorCode}</Description>
              </DescriptionList>
            </Card>
          </div>
        </Modal>
      </div>
    );
  }


  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return (
      <div className={styles.tableListForm}>
        {this.renderForm()}
      </div>
    );
  }
}
